For a personal project i'm playing around with a chess library for vue, since it's not been updated for a while i'm not sure if someone can help me here, but we'll see i guess :)

In the documentation there is an example of the component where you can play vs a "AI" that plays random moves. Now when you made your move as white, the board will highlight the move you made. But then it will do a random move with black but the move is not highlighted, the move you made as white will stay highlighted.

I Made a sandbox if someone wants to play around with it: https://codesandbox.io/s/fervent-pascal-18xru6?file=/src/components/board.vue

The library uses chessground that is used by Lichess, and when you play vs the computer there, it will also highlight the moves that the computer makes. Does somebody know how i also could get that?

What i tried

1. The board has some config options, also one for highlighting lastMove, this has a default value of true. I thought maybe this wasn't working properly, but adding this to this.board.set() doesn't change anything.

2. turnColor: this.toColor() is always "white", so i thought maybe it doesn't know black made a move. But changing this around did nothing.

Here is the code of the component:

import { chessboard } from "vue-chessboard";

export default {
  name: "newboard",
  extends: chessboard,
  methods: {
    userPlay() {
      return (orig, dest) => {
        if (this.isPromotion(orig, dest)) {
          this.promoteTo = this.onPromotion();
        }
        this.game.move({ from: orig, to: dest, promotion: this.promoteTo }); // promote to queen for simplicity
        this.board.set({
          fen: this.game.fen(),
        });
        this.calculatePromotions();
        this.aiNextMove();
      };
    },
    aiNextMove() {
      let moves = this.game.moves({ verbose: true });
      let randomMove = moves[Math.floor(Math.random() * moves.length)];
      this.game.move(randomMove);

      this.board.set({
        fen: this.game.fen(),
        turnColor: this.toColor(),
        movable: {
          color: this.toColor(),
          dests: this.possibleMoves(),
          events: { after: this.userPlay() },
        },
      });
    },
  },
  mounted() {
    this.board.set({
      movable: { events: { after: this.userPlay() } },
    });
  },
};